<template>
  <base-page-view class-name="page-container">
    <base-nav title="" left-icon="back" left-icon-pic="icon_arror_left">
      <view slot="title" class="praise-tab-control">
        <view class="tab-item" :class="{active: tabSelected === 1}" @click="tabSelectedChange(1)">我的点赞</view>
        <view class="tab-item" :class="{active: tabSelected === 2}" @click="tabSelectedChange(2)">收到的赞</view>
      </view>
    </base-nav>
    <view v-if="listLength" class="attention-list-container">
      <view v-for="(item, index) in list" :key="index" class="attention-list-box">
        <view v-if="fetchType === 'receivedPraise'" class="attention-list-item">
          <view class="user-pic" @click="toUserCenter(item)">
            <b-image width="66" height="66" is-head :src="item.head_img_url" mode="aspectFill" />
          </view>
          <view class="user-intro">
            <view class="title">{{ item.nick_name }}</view>
          </view>
          <view v-if="!item.oneself" class="attention-btn" @click="attentionOperator(item)">
            <view v-if="item.attention_status === 1" class="attention-ned">已关注</view>
            <view v-if="item.attention_status === 2" class="attention-les">+关注</view>
            <view v-if="item.attention_status === 3" class="attention-ned">互相关注</view>
          </view>
        </view>
        <view class="article-content" @click="$navigateTo('/pagesMaterial/detail/index?id=' + item.id)">
          <view v-if="item.cover || (item.resource_object_list && item.resource_object_list.length)" class="article-pic">
            <b-image width="60" height="60" :src="item.cover || item.resource_object_list[0].videoPreviewImg || item.resource_object_list[0].resourceUrl" mode="aspectFill" />
          </view>
          <view class="article-title">{{ item.title }}</view>
          <view class="article-time">{{ item.time_desc }}</view>
        </view>
      </view>
    </view>
    <base-list-state :list-length="listLength" :list-query="{page_no: listQuery.page_no, page_size: listQuery.page_size}" :list-state="listState" :list-empty="listEmpty" />
  </base-page-view>
</template>
<script>
import { debounce } from '@/utils/tools'
export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      fetchType: 'receivedPraise',
      tabSelected: 2,
      listQuery: {
        page_size: 20,
        page_no: 1
      },
      // view_type: ~ 自营商品、2 ~ 素材圈、3~ 直播、4~碧划算、5~箱起
      listState: {
        loading: true,
        more: true
      },
      listEmpty: { type: 'empty_list', text: '暂无数据' },
      list: []
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.list.length
    }
  },
  onLoad(option) {
    this.init()
  },
  onPullDownRefresh() {
    this.init()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom: debounce(function() {
    this.loadMore()
  }, 500),
  methods: {
    init() {
      this.listQuery = {
        page_size: 20,
        page_no: 1
      }
      this.listState.loading = false
      this.listState.more = true
      this.list = []
      this._getRecommend()
    },
    tabSelectedChange(type) {
      this.tabSelected = type
      if (type === 1) {
        this.fetchType = 'myPraise'
      } else {
        this.fetchType = 'receivedPraise'
      }
      this.init()
    },
    toUserCenter(item) {
      this.$navigateTo(`/pagesMaterial/user-center/index?materialUserId=${item.user_id}`)
    },
    async _getRecommend() {
      console.log('this.listState.loading || !this.listState.more', this.listState.loading, !this.listState.more)
      if (this.listState.loading || !this.listState.more) return
      this.listState.loading = true

      const res = await this.$api.materialApi[this.fetchType](this.listQuery)
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.list = []
        }
        if (res.data && res.data.length < this.listQuery.page_size) {
          this.listState.more = false
        }
        this.list = this.list.concat(res.data)
      }
      this.listState.loading = false
      this.$emit('getCommendData', this.list.length > 0)
    },
    async attentionOperator(item) {
      const operatorType = item.attention_status === 2 ? 1 : 0
      const res = await this.$api.materialApi.attentionOperator({
        operatorType,
        userId: item.user_id
      })
      if (res.success) {
        item.attention_status = res.data.attentionStatus
        uni.showToast({
          title: item.attention_status === 2 ? '取消关注成功' : '关注成功',
          icon: 'none',
          duration: 2000
        })
      }
    },
    loadMore() {
      if (this.listState.loading || !this.listState.more) return
      this.listQuery.page_no++
      this._getRecommend()
    }
  }
}
</script>
<style lang="scss" scoped>
.praise-tab-control{
  display: flex;
  font-size: 34rpx;
  line-height: 88rpx;
  justify-content: center;
  color: #999;
  .tab-item{
    position: relative;
    margin: 0 34rpx;
    &.active{
      color: #000;
      font-weight: bold;
      &::before{
        position: absolute;
        content: '';
        width: 36rpx;
        height: 4rpx;
        background-color: #000;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10rpx;
      }
    }
  }
}
.attention-list-container{
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 20rpx;
  .attention-list-box{
    border-bottom: 1px solid $color-border;
    &:nth-last-child(1) {
      border-bottom: none;
    }
  }
  .attention-list-item{
    display: flex;
    align-items: center;
    height: 146rpx;
    &:nth-last-child(1) {
      border-bottom: none;
    }
    .user-pic{
      flex: 0 0 66rpx;
      width: 66rpx;
      height: 66rpx;
      border-radius: 50%;
      overflow: hidden;
      image{
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
      }
    }
    .user-intro{
      flex: 1;
      box-sizing: border-box;
      padding-left: 25rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title{
        width: 100%;
        height: 40rpx;
        margin-bottom: 6rpx;
        line-height: 40rpx;
        @include text-ellipsis-line(1);

      }
      .line{
        color: #999;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .type{
          font-size: 28rpx;
        }
        .time{
          font-size: 24rpx;
        }
      }
    }
  }
  .article-content{
    display: flex;
    background-color: #f5f5f5;
    margin-bottom: 24rpx;
    box-sizing: border-box;
    padding: 0 15rpx;
    width: 710rpx;
    height: 90rpx;
    align-items: center;
    .article-title{
      @include text-ellipsis-line(1);
      margin-left: 16rpx;
      flex: 1;
    }
    .article-time{
      color: #999;
    }

  }
  .attention-btn{
    width: 140rpx;
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    font-size: 26rpx;
    .attention-ned{
      border-radius: 2px;
      border: 2rpx solid #ccc;
      color: #ccc;
    }
    .attention-les{
      border-radius: 2px;
      border: 2rpx solid #000;
      color: #000;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 20rpx  0;
}
</style>
